html{
    font-size: 15px;
    body{
        width: 100vw;
        height: 100vh;
        background-color: blueviolet;
        display: grid;
        main{
            width: 600px;
            height: 400px;
            display: grid;
            border: solid 3px red;
            align-self: center;
            justify-self: center;
            position: relative;
            overflow: hidden;
            z-index: 1 !important;
            cursor: pointer;
            &:hover{
                section,ul>li:nth-child(1)::after{
                    animation-play-state: paused;
                }
            }
            section{
                display: grid;
                width: 2400px;
                grid-template-columns:repeat(6,600px);
                animation-name: bannermove;
                animation-duration: 8s;
                animation-timing-function: steps(6,end);
                animation-iteration-count: infinite;
                // height: 400px;
                @keyframes bannermove {
                    to{
                        transform: translateX(-3600px);
                    }
                }
                div{
                    img{
                        width: 600px;
                        height: 100%;
                        object-fit: cover;
                    }
                } 
            }
            ul{
                display: grid;
                grid-template-columns: repeat(6,30px);
                position: absolute;
                top: 360px;
                left: 200px;
                li{
                    position: relative;
                    &::before{
                        content: '';
                        display: block;
                        width: 20px;
                        height: 20px;
                        background-color: rgb(170, 170, 172);
                        border-radius: 50%;
                        background-color: #ddd;
                        border: solid 1px #aaa;
                        opacity: 0.6;
                    }
                    &:nth-child(1)::after{
                        content: '';
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        border: solid 1px #aaa;
                        background-color: red;
                        position: absolute;
                        top: 0;
                        left: 0;
                        animation-name: limove;
                        animation-duration: 8s;
                        animation-timing-function: steps(6,end);
                        animation-iteration-count: infinite;
                        z-index: 2;
                        @keyframes limove {
                            to{
                                transform: translateX(calc(6 * 100% + 6 * 10px ));
                            }
                        }
                    }
                }
            }
        }
    }
}